<template>
  <div class="whole">
    <el-form
      ref="person"
      class="person"
      :model="person"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="name" label="用户名：">
        <el-input v-model.trim="person.name"> </el-input>
      </el-form-item>

      <el-form-item prop="age" label="年龄：">
        <el-input v-model.number="person.age"> </el-input>
      </el-form-item>
      <el-form-item prop="male" label="性别：">
        <el-radio-group v-model="person.male">
          <el-radio :label="true">男</el-radio>
          <el-radio :label="false">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="personSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.person.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import New from './components/New.vue';
export default {
  name: "Fourth",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      person: {
        name: null,
        age: 18,
        male: true,
        personId: 0,
      },
      // rules: {
      //     username: [
      //         {required: true,   message: '请输入账号', trigger: 'blur'},
      //         {pattern: /^\w+$/, message: '请输入字母/数字/下划线', trigger: ['blur','change']},
      //         {required:true, validator:this.validateItem ,trigger:'blur'}
      //         ],
      //     password: [
      //         {required: true, message: '请输入密码', trigger: 'blur'},
      //         ],
      //     }
      rules: {
        name: [
          { required: true, message: "必须输入姓名", trigger: "blur" },
          { min: 2, max: 4, message: "姓名2-4个字符", trigger: "blur" },
        ],
        age: [
          { type: "number", message: "年龄必须是数字", trigger: "blur" },
          { validator: this.validateItemAge, trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    personSubmit() {
      this.$http({
        method: "post",
        url: "/person",
        data: this.person,
      }).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          //this.total = res.data.total;
          //this.newsResults = res.data.results;
        },
        (error) => {
          console.log(error.response.status);
        }
      );
      // this.$refs.person.validate((valid) => {
      //   if (valid) {
      //     this.$http({
      //       method: "post",
      //       url: "/person",
      //       data: this.person,
      //     }).then(
      //       (res) => {
      //         this.$message.warning(JSON.stringify(res.data));
      //         //this.total = res.data.total;
      //         //this.newsResults = res.data.results;
      //       },
      //       (error) => {
      //         console.log(error.response.status);
      //       }
      //     );
      //   } else {
      //     this.$message.warning("校验失败，请核对表单数据，重新提交");
      //   }
      // });
    },
    validateItemAge(rule, value, callback) {
      console.log(JSON.stringify(rule), value, typeof value);

      if (!value) {
        return callback(new Error("数据不存在"));
      } else if (value < 18) {
        return callback(new Error("未成年禁止注册"));
      } else {
        return callback();
      }
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<style scoped>
/*<style lang='scss' scoped>*/
.whole {
  display: flex;
  justify-content: center;
  align-items: center;
}
.person {
  flex: 0.35;
  margin: 40px 2px 2px 2px;
}
</style>
